// 详情页面
<template>
    <div>
        <div id="daohang"><h3>{{detailsData['name']}}</h3></div>
        <div style="width:80%;margin:auto;margin-top:100px;">
            <div style="display:inline-block;width:70%;">
                <div style="display:inline-block">
                    <!-- 左侧 -->
                    <img :src="detailsData['url']" alt=""
                        height="250px"
                        width="350px"
                    >
                </div>
                <div style="display:inline-block;width:55%;margin-left:30px;vertical-align:top">
                    <!-- 右侧 -->
                    <div>
                        <label for="" style="text-decoration: line-through;display:inline-block;">市场价￥{{detailsData['primary']}}</label>
                        <h4 style="display:inline-block;">￥{{(detailsData['primary']*detailsData['discount']).toFixed(2)}}</h4>
                        <el-button type="danger" icon="el-icon-star-on" circle plain style="float: right;"></el-button>
                    </div>
                    <hr style="margin:0">
                    <div style="margin-top:20px">
                        <p style="display:inline-block;font-weight:bold">商品简介:</p>
                        <p style="display:inline-block;float:right;color:#0ab700;font-weight:bold">√有货</p>
                    </div>
                    <hr>
                    <div style="text-align: center;">
                        <div style="font-weight:bold">购买数量 &nbsp &nbsp <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number></div>
                        <div style="margin-top:20px">
                            <el-button type="warning" plain>加入购物车</el-button>
                            <el-button type="danger" plain>立即购买</el-button>
                        </div>
                    </div>
                    
                </div>

            </div>

            <!-- 右侧热销产品 -->
            <div style="display:inline-block;vertical-align:top;width:200px">
                <h4>热销商品</h4>
                <el-divider></el-divider>
                <div>
                    <div  style="display:inline-block;">
                        <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" width="80px" height="80px" alt="">
                    </div>
                    <div style="display:inline-block;vertical-align:top">
                        <label for="">测试测试测测试</label>
                        <label for="">￥147.21</label>
                        <label for="" style="text-decoration: line-through;">市场价:￥196.22</label>
                    </div>
                </div>
                <br>
                <div>
                    <div  style="display:inline-block;">
                        <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" width="80px" height="80px" alt="">
                    </div>
                    <div style="display:inline-block;vertical-align:top">
                        <label for="">测试测试测测试</label>
                        <label for="">￥147.21</label>
                        <label for="" style="text-decoration: line-through;">市场价:￥196.22</label>
                    </div>
                </div>
                <br>
                <div>
                    <div  style="display:inline-block;">
                        <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" width="80px" height="80px" alt="">
                    </div>
                    <div style="display:inline-block;vertical-align:top">
                        <label for="">测试测试测测试</label>
                        <label for="">￥147.21</label>
                        <label for="" style="text-decoration: line-through;">市场价:￥196.22</label>
                    </div>
                </div>
            </div>
        </div>
        

        <!-- 商品描述和商品评论 -->
        <div style="width:80%;margin:auto;">
            <el-tabs type="card">
            <el-tab-pane>
                <span slot="label">商品描述</span>
                {{detailsData['name']}}
            </el-tab-pane>
            <el-tab-pane label="商品评论">    
                <div v-for="pl in data" :key=pl.user>
                    <label for="" style="display:inline-block;font-weight:bold;color:#414141">{{pl.user}}--</label>
                    <span v-for="i in 5" :key="i" class="xingxing">
                        <i class="el-icon-star-on" v-if="(pl.xx-i)>=0" style="color:#f56c6c"></i>
                        <i class="el-icon-star-on" v-else></i>
                    </span>
                    <p>{{pl.pl}}</p>
                    <br>
                    <br>
                </div>

            </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>


<style>
#daohang{
    background-color:#f2f2f2;
    height:80px;
    width:100%;
}
#daohang h3{
    width: 80%;
    height: 80px;
    line-height: 80px;
    margin: auto;
    /* background-color: burlywood; */
}
.xingxing{
    color: #eff2f7;
}
</style>

<script>
export default {
    props:['detailsData'],
    data(){
        return{
            num:1,
            data:[
                {user:'17765439956',xx:4,pl:'好吃'},
                {user:'65654399456',xx:5,pl:'特别好吃'},
                {user:'89654392956',xx:2,pl:'一般般'},
                {user:'65656569956',xx:1,pl:'难吃'},
                {user:'32595894956',xx:0,pl:'超难吃'},
                {user:'21121548654',xx:3,pl:'还行'},
                {user:'33599715649',xx:3,pl:'勉强'},
            ],
        }
    },
}
</script>